<template>
  <div class="">
    <el-row type="flex" justify="end">
      <div style="margin: 10px">
        <el-button type="primary" @click="createOpen(0)">添加</el-button>
      </div>
    </el-row>
    <!-- {{ tableData }} -->
    <div class="container_grid">
      <div
        v-for="(item, index) in tableData"
        :key="index"
        :offset="index > 0 ? 2 : 0"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img
            style="width: 100%; height: 30vh"
            :src="item.show_img"
            class="image"
          />
          <div style="padding: 14px">
            <div style="display: flex; justify-content: space-between">
              <span>{{ item.show_name }}</span>
              <span>尺寸：{{ item.size }}</span>
            </div>
            <!-- <div style="display: flex;justify-content: space-between;">
            <span>{{item.show_name}}</span>
            <span>尺寸：{{item.size}}米</span>
         </div> -->
            <div
              class="bottom"
              style="display: flex; justify-content: space-between"
            >
              <!-- <time class="time">{{ currentDate }}</time> -->
              <el-button type="text" class="button" @click="createOpen(1, item)"
                >店家修改</el-button
              >
              <el-button type="text" class="button" @click="editOpen(item)"
                >店家详情</el-button
              >
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog title="创建商家展示" :visible.sync="dialogVisible" width="40%">
      <div>
        <el-form :inline="true" :model="formEdit" class="demo-form-inline">
          <el-form-item label="展示名">
            <el-input
              v-model="formEdit.show_name"
              placeholder="展示名"
            ></el-input>
          </el-form-item>
          <el-form-item label="尺寸(厘米)">
            <el-input
              v-model.number="formEdit.size"
              placeholder="尺寸(厘米)"
            ></el-input>
          </el-form-item>
          <el-form-item label="背景颜色">
         
            <el-color-picker
              v-model="formEdit.backgroundcolor"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="状态" v-if="editOpenType == 1">
            <el-select v-model="formEdit.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- {{back_ground_color}} -->
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      formEdit: {},
      editOpenType: null,
      options: [
        {
          value: 0,
          label: "未绑定",
        },
        {
          value: 1,
          label: "已绑定",
        },
      ],
    };
  },
  computed: {
    store_id() {
      return this.$store.state.user.regionalData.store_id;
    },
  },
  methods: {
    createOpen(type, row) {
      if (row) {
        this.formEdit = JSON.parse(JSON.stringify(row));
      }
      this.editOpenType = type;
      this.dialogVisible = true;
    },
    edit() {
      //新建编辑
      let url, message;
      if (this.editOpenType == 0) {
        this.formEdit.back_ground_color = this.formEdit.backgroundcolor
        url = "/create_store_show_img_api";
        message = "添加成功";
      } else {
        delete this.formEdit.show_img;
        delete this.formEdit.size;
        delete this.formEdit.time;
        // this.formEdit.back_ground_color = this.formEdit.backgroundcolor
        // delete this.formEdit.backgroundcolor
        url = "/modify_store_show_img_api";
        message = "修改成功";
      }
      this.https(url, {
        store_id: this.store_id,
        ...this.formEdit,
      }).then((res) => {
        this.$message.success(message);
        this.dialogVisible = false;
        this.getList();
      });
    },
    editOpen(item) {
      if (item) {
        this.$router.push({path: "info", name: 'StoreInformation/info', params: { show_id:item.show_id}})
      } else {
      }

      // this.$router.push({name:'StoreInformation/info',query: {id:'1'}})
    },
    getList() {
      console.log(this);
      this.https("/store_show_list_api", { store_id: this.store_id }).then(
        (res) => {
          this.tableData = res;
        }
      );
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.container_grid {
  padding: 2vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr));
  grid-gap: 3vw;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
